<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core"
                xmlns:constants="http://www.tuanzi.com/constants/tags"
                template="/templates/template.xhtml">
    <ui:define name="title">微信公众号客服消息管理</ui:define>
    <ui:define name="content">

        <h:form>

            <div class="topbar clearfix"
                 style="background: -webkit-linear-gradient(top,#f6f7f9 0,#ebedf0 100%);">
                <p:toolbar id="buttonToolBar">

                    <f:facet name="right">
                        <p:commandButton value="编辑" icon="fa fa-edit"
                                         actionListener="#{wechatCustomerMessageManageBean.changeStatusToEdit}"
                                         process="@this"
                                         update="@form" rendered="#{wechatCustomerMessageManageBean.isView()}"/>
                        <p:commandButton
                                actionListener="#{wechatCustomerMessageManageBean.onSave}"
                                icon="fa fa-save"
                                value="保存配置"
                                update="@form"
                                rendered="#{wechatCustomerMessageManageBean.isAdd() || wechatCustomerMessageManageBean.isEdit()}"/>
                        <p:button value="返回" icon="fa fa-reply-all" href="#{currentUserBean.back}"/>
                    </f:facet>
                </p:toolbar>
            </div>
            <div class="ui-fluid" style="padding-top: 30px;">
                <div class="ui-g">

                    <div class="ui-g-12">
                        <div class="card ui-g-12">

                            <div class="ui-g-1">
                                <p:outputLabel value="消息名"/>
                                <strong style="color: red">*</strong>
                            </div>
                            <div class="ui-g-11">
                                <p:inputText value="#{wechatCustomerMessageManageBean.$.name}"
                                             disabled="#{wechatCustomerMessageManageBean.isView()}"/>
                            </div>

                            <div class="ui-g-1">
                                <p:outputLabel value="公众号"/>
                                <strong style="color: red">*</strong>
                            </div>
                            <div class="ui-g-5">
                                <p:selectOneMenu id="productId" value="#{wechatCustomerMessageManageBean.$.productId}"
                                                 filter="true" filterMatchMode="contains"
                                                 disabled="#{wechatCustomerMessageManageBean.isView()}">
                                    <p:ajax process="@this"/>
                                    <f:selectItem itemLabel="- 请选择 -" itemValue="" noSelectionOption="true"
                                                  />
                                    <f:selectItems
                                            value="#{wechatCustomerMessageManageBean.dictionaries[DictionaryCode.WECHAT_OFFICIAL_ACCOUNT]}"
                                            var="dic"
                                            itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                </p:selectOneMenu>
                            </div>

                            <div class="ui-g-1">
                                <p:outputLabel value="生效时间"/>
                            </div>
                            <div class="ui-g-5">
                                <p:calendar value="#{wechatCustomerMessageManageBean.$.effectiveStartTime}"
                                            styleClass="autoWidthCalendar"
                                            locale="#{constants:get('LOCALE')}"
                                            timeZone="#{constants:get('TIME_ZONE')}"
                                            pattern="#{constants:get('DATETIME_FORMAT')}"
                                            navigator="true"
                                            converterMessage="日期格式输入错误! 例子: 2018-04-23 00:00:00"
                                            disabled="#{wechatCustomerMessageManageBean.isView()}"/>
                                <span>—</span>
                                <p:calendar value="#{wechatCustomerMessageManageBean.$.effectiveEndTime}"
                                            styleClass="autoWidthCalendar"
                                            locale="#{constants:get('LOCALE')}"
                                            timeZone="#{constants:get('TIME_ZONE')}"
                                            pattern="#{constants:get('DATETIME_FORMAT')}"
                                            navigator="true"
                                            converterMessage="日期格式输入错误! 例子: 2018-04-23 23:59:59"
                                            disabled="#{wechatCustomerMessageManageBean.isView()}"/>
                            </div>
                        </div>
                    </div>

                    <div class="ui-g-12">
                        <div class="card ui-g-12">

                            <div class="ui-g-1">
                                <p:outputLabel value="触发行为"/>
                                <strong style="color: red">*</strong>
                            </div>
                            <div class="ui-g-5">
                                <p:selectOneMenu id="triggerBehavior"
                                                 value="#{wechatCustomerMessageManageBean.$.triggerBehavior}"
                                                 filter="true" filterMatchMode="contains"
                                                 disabled="#{wechatCustomerMessageManageBean.isView()}">
                                    <f:selectItem itemLabel="- 请选择 -" itemValue="" noSelectionOption="true"/>
                                    <f:selectItems
                                            value="#{wechatCustomerMessageManageBean.dictionaries[DictionaryCode.WECHAT_CUSTOMER_MESSAGE_TRIGGER_BEHAVIOR]}"
                                            var="dic"
                                            itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                </p:selectOneMenu>
                            </div>

                            <div class="ui-g-1">
                                <p:outputLabel value="触发时间"/>
                                <strong style="color: red">*</strong>
                            </div>
                            <div class="ui-g-5">
                                <p:selectOneMenu id="triggerTime"
                                                 value="#{wechatCustomerMessageManageBean.$.triggerTime}"
                                                 filter="true" filterMatchMode="contains"
                                                 disabled="#{wechatCustomerMessageManageBean.isView()}">
                                    <f:selectItem itemLabel="- 请选择 -" itemValue="" noSelectionOption="true"/>
                                    <f:selectItems
                                            value="#{wechatCustomerMessageManageBean.dictionaries[DictionaryCode.WECHAT_CUSTOMER_MESSAGE_TRIGGER_TIME]}"
                                            var="dic"
                                            itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                </p:selectOneMenu>
                            </div>

                            <div class="ui-g-1">
                                <p:outputLabel value="消息类型"/>
                                <strong style="color: red">*</strong>
                            </div>
                            <div class="ui-g-5">
                                <p:selectOneMenu id="msgType" value="#{wechatCustomerMessageManageBean.$.msgType}"
                                                 filter="true" filterMatchMode="contains"
                                                 disabled="#{wechatCustomerMessageManageBean.isView()}">
                                    <p:ajax process="@this" update="textPanel"/>
                                    <f:selectItem itemLabel="- 请选择 -" itemValue="" noSelectionOption="true"/>
                                    <f:selectItems
                                            value="#{wechatCustomerMessageManageBean.dictionaries[DictionaryCode.WECHAT_CUSTOMER_MESSAGE_MSG_TYPE]}"
                                            var="dic"
                                            itemLabel="#{dic.name}" itemValue="#{dic.value1}"/>
                                </p:selectOneMenu>
                            </div>

                        </div>
                    </div>

                    <p:outputPanel styleClass="padding0 ui-g-12" id="textPanel">
                        <div class="ui-g-12">
                            <p:outputPanel styleClass="padding0 ui-g-12"
                                           rendered="#{wechatCustomerMessageManageBean.showText()}">
                                <div class="card ui-g-12">
                                    <div class="ui-g-1">
                                        <p:outputLabel value="文本消息内容"/>
                                        <strong style="color: red">*</strong>
                                    </div>
                                    <div class="ui-g-11">
                                        <p:inputTextarea id="content"
                                                         value="#{wechatCustomerMessageManageBean.$.content}" rows="10"
                                                         counter="display" maxlength="200"
                                                         counterTemplate="剩余 {0} 字, 文本消息字数最大限制为200字"
                                                         disabled="#{wechatCustomerMessageManageBean.isView()}"/>
                                        <h:outputText id="display"/>
                                    </div>
                                </div>
                            </p:outputPanel>


                            <p:outputPanel styleClass="padding0 ui-g-12 card"
                                           rendered="#{wechatCustomerMessageManageBean.showImage()}">
                                <div class="ui-g-1">
                                    <p:outputLabel value="图片"/>
                                    <strong style="color: red">*</strong>
                                </div>
                                <div class="ui-g-11">
                                    <div class="ui-g-12 ui-g-nopad">
                                        <div class="ui-g-5 ui-g-nopad">
                                            <p:fileUpload
                                                    fileUploadListener="#{wechatCustomerMessageManageBean.uploadImage}"
                                                    mode="advanced"
                                                    update="@this"
                                                    process="@this"
                                                    auto="true" sizeLimit="#{constants:get('UPLOAD_FILE_SIZE')}"
                                                    allowTypes="/(\.|\/)(#{constants:get('UPLOAD_FILE_SUFFIX')})$/"
                                                    label="上传"
                                                    invalidFileMessage="不支持上传文件类型"
                                                    invalidSizeMessage="文件过大"
                                                    disabled="#{wechatCustomerMessageManageBean.isView()}"/>

                                        </div>

                                        <div class="ui-g-2"></div>

                                        <div class="ui-g-5 ui-g-nopad">
                                            <p:graphicImage id="image"
                                                            value="#{wechatCustomerMessageManageBean.$.picUrl}"
                                                            width="40px"/>
                                        </div>
                                    </div>
                                </div>

                            </p:outputPanel>


                            <p:outputPanel styleClass="padding0 ui-g-12 card"
                                           rendered="#{wechatCustomerMessageManageBean.showNews()}">
                                <div class="ui-g-1">
                                    <p:outputLabel value="图文标题"/>
                                    <strong style="color: red">*</strong>
                                </div>
                                <div class="ui-g-11">
                                    <p:inputText id="title" value="#{wechatCustomerMessageManageBean.$.title}"
                                                 style="width:100%"
                                                 disabled="#{wechatCustomerMessageManageBean.isView()}"/>
                                </div>

                                <div class="ui-g-1">
                                    <p:outputLabel value="图文描述"/>
                                    <strong style="color: red">*</strong>
                                </div>
                                <div class="ui-g-11">
                                    <p:inputText id="description"
                                                 value="#{wechatCustomerMessageManageBean.$.description}"
                                                 style="width:100%"
                                                 disabled="#{wechatCustomerMessageManageBean.isView()}"/>
                                </div>

                                <div class="ui-g-1">
                                    <p:outputLabel value="图文跳转链接"/>
                                    <strong style="color: red">*</strong>
                                </div>
                                <div class="ui-g-11">
                                    <p:inputText id="url" value="#{wechatCustomerMessageManageBean.$.url}"
                                                 style="width:100%"
                                                 disabled="#{wechatCustomerMessageManageBean.isView()}"/>
                                </div>
                            </p:outputPanel>


                        </div>
                    </p:outputPanel>
                </div>
            </div>
        </h:form>
    </ui:define>
</ui:composition>